const path = require("path");
// 引入 CleanWebpackPlugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const baseConfig = require("./webpack.base");
const merge = require("webpack-merge");
// 引入 MiniCssExtractPlugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const clientConfig = {
  devtool: "source-map",
  entry: "./src/client",
  // 打包至 js 文件的 bundle.[hash:5].js
  output: {
    filename: "js/bundle.[hash:5].js",
    path: path.resolve(__dirname, "./public"),
    // 用于确认打包路径在 public
    publicPath: "/"
  },
  plugins: [
    // 清空某些文件，但排除 favicon.ico 文件
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ["**/*", "!favicon.ico"]
    }),
    // 新增打包至 css 文件的 bundle.[hash:5].css
    new MiniCssExtractPlugin({
      filename: "css/bundle.[hash:5].css"
    })
  ],
  module: {
    rules: [
      // 客户端样式解析 css-loader
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader?modules"]
      },
      // 客户端样式解析 file-loader ，加载并生成图片
      {
        test: /\.(png)|(jpg)|(gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "img/[name].[hash:5].[ext]"
            }
          }
        ]
      }
    ]
  }
};

module.exports = merge(baseConfig, clientConfig);